import React, { useState } from 'react';
import AweSomeSwiper, { ReactSwiperState } from 'react-awesome-swiper';

type Props = {
  banner: [];
};

const Banner: React.FC<Props> = (props) => {
  const config: ReactSwiperState = {
    loop: true,
    autoplay: {
      delay: 1500,
    },
    pagination: {
      el: '.swiper-pagination',
    },
  };
  return (
    <AweSomeSwiper className="banner" config={config}>
      <div className="swiper-wrapper">
        {props?.banner?.map((item, i) => (
          <div className="swiper-slide" key={i}>
            <img alt="banner" src={item} />
          </div>
        ))}
      </div>
      <div className="swiper-pagination"></div>
    </AweSomeSwiper>
  );
};

export default Banner;
